<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>方案查看</title>
<link rel="stylesheet" href="../js/layui/css/layui.css">
<link type="text/css" href="../css/bootstrap.min.css" rel="Stylesheet" />
<link href="../css/bootstrap-select.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="../js/layui/layui.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
}
.layui-table, .layui-table-view {
	margin: 0;
}
.layui-form-label {
	width: 90px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
	showLoginInfo();
	$.ajax({
		url: "../g/service/Sample/getUserId",
		type:'POST',
		cache:false,
		async:false,
		dataType: "json",
		contentType:"application/json",
	    success:function(data){
	    	if(data != 0 && data != 1) {
				window.parent.location.href="../../index.html";
	    	}
	    	userId = data;
	    }
	});
	createTable();
});
//展示登陆用户信息
function showLoginInfo(){
	$.ajax({
		url: '../pv/login/loginInfo',
		type: "get",
		success:function(res){
			result = res;
			if (result != "") {
				$("#login_name").text(result);
			}else {
				$("#login").text("登录/注册");
				window.parent.location.href="login.html";
			}
		}
	})
}
function createTable() {
	layui.use(['table','layer','form'], function(){
		var table = layui.table,layer = layui.layer,form = layui.form;
		var inittable = table.render({
		    elem: '#planTable',
		    height: "full-120",
		    url: '../g/service/Sample/getPlanTable',
		    method: "post",
		    where: {usernames:$('#username').selectpicker('val'),projectnames:$('#projectname').selectpicker('val'),
	    		plannames:$('#planname').selectpicker('val'),state:$('#calcstate').selectpicker('val')},
		    contentType: 'application/json',
		    cols: [[ //表头
		        {field: 'username', title: '用户', width:'20%', align: 'center'},
		      	{field: 'projectname', title: '工程', width:'30%', align: 'center'},
		      	{field: 'planname', title: '方案', width:'30%', align: 'center'},
		      	{field: 'state', title: '计算状态', width:'20%', align: 'center'}
		    ]]
		});
		$.ajax({
			url: "../g/service/Sample/getUserSelect",
			type:'POST',
			cache:false,
			async:false,
			dataType: "json",
			contentType:"application/json",
		    success:function(data){
				var content = '';
				$.each(data.data,function(i,n){
					content += "<option value='" + n.code + "'>"+ n.name+"</option>";
				});
				$("#username").html(content);
				$('#username').on('changed.bs.select', function (e, index, sel, val) {
					$.ajax({
						url: "../g/service/Sample/getProjectSelect",
						type:'POST',
						cache:false,
						async:false,
						dataType: "json",
						data: JSON.stringify({"data":$('#username').selectpicker('val')}),
						contentType:"application/json",
					    success:function(data){
							var content = '';
							$.each(data.data,function(i,n){
								content += "<option value='" + n.code + "'>"+ n.name+"</option>";
							});
							$("#projectname").html(content);
							$('#projectname').on('changed.bs.select', function (e, index, sel, val) {
								$.ajax({
									url: "../g/service/Sample/getPlanSelect",
									type:'POST',
									cache:false,
									async:false,
									dataType: "json",
									data: JSON.stringify({"data":$('#projectname').selectpicker('val')}),
									contentType:"application/json",
								    success:function(data){
										var content = '';
										$.each(data.data,function(i,n){
											content += "<option value='" + n.code + "'>"+ n.name+"</option>";
										});
										$("#planname").html(content);
										$('#planname').selectpicker('refresh');
								    }
								});
						    });
							$('#projectname').selectpicker('refresh');
					    }
					});
			    });
				$('#username').selectpicker('refresh');
		    }
		});

		$("#select").click(function() {
			inittable.reload({where:{usernames:$('#username').selectpicker('val'),projectnames:$('#projectname').selectpicker('val'),
	    		plannames:$('#planname').selectpicker('val'),state:$('#calcstate').selectpicker('val')}});
		});
		$("#reset").click(function() {
			$('#username').selectpicker('val',[]);
			$('#projectname').selectpicker('val',[]);
			$('#planname').selectpicker('val',[]);
			$('#calcstate').selectpicker('val','');
			inittable.reload({where:{usernames:$('#username').selectpicker('val'),projectnames:$('#projectname').selectpicker('val'),
	    		plannames:$('#planname').selectpicker('val'),state:$('#calcstate').selectpicker('val')}});
		});
	});
}
</script>
</head>
<body>
	<div style="padding: 10px 0px 0px 20px;background-color: #fff;height: 105px;">
		<div class="layui-form-item" style="margin-bottom: 0px;">
		    <div class="layui-inline">
				<label class="layui-form-label">用户</label>
			    <div class="layui-input-inline">
			    	<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					title="请选择用户" data-none-results-text="未找到相关用户{0}" data-select-all-text="全选" data-deselect-all-text="取消全选" id="username" 
					data-width="180px" data-size="10" data-count-selected-text="已选择{1}个用户中的{0}个"></select>
			    </div>
		    </div>
		    <div class="layui-inline">
				<label class="layui-form-label">工程</label>
			    <div class="layui-input-inline">
			    	<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					title="请选择工程" data-none-results-text="未找到相关工程{0}" data-select-all-text="全选" data-deselect-all-text="取消全选" id="projectname" 
					data-width="180px" data-size="10" data-count-selected-text="已选择{1}个工程中的{0}个"></select>
			    </div>
		    </div>
		    <div class="layui-inline">
				<label class="layui-form-label">方案</label>
			    <div class="layui-input-inline">
			    	<select class="form-control selectpicker" multiple data-live-search="true" data-actions-box="true" data-selected-text-format="count > 4"
					title="请选择方案" data-none-results-text="未找到相关方案{0}" data-select-all-text="全选" data-deselect-all-text="取消全选" id="planname" 
					data-width="180px" data-size="10" data-count-selected-text="已选择{1}个方案中的{0}个"></select>
			    </div>
		    </div>
		    <div class="layui-inline">
				<label class="layui-form-label">计算状态</label>
			    <div class="layui-input-inline">
			    	<select class="form-control selectpicker" title="请选择状态" id="calcstate" data-width="180px">
			    		<option value=""></option>
			    		<option value="正在计算">正在计算</option>
			    		<option value="等待中">等待中</option>
			    	</select>
			    </div>
		    </div>
		    <div class="layui-inline">
			    <div class="layui-input-inline" style="height: 42px;">
				    <button class="layui-btn layui-btn-sm" style="background-color: #4090E7;width: 70px;" id="select">搜索</button>
				    <button class="layui-btn layui-btn-sm" style="background-color: #CCC;width: 70px;" id="reset">重置</button>
			    </div>
		    </div>
		</div>
	</div>
	<div style="width: 100%;height: calc(100% - 105px);">
		<table class="layui-table" id="planTable" lay-filter="planTable"></table>
	</div>
</body>
</html>